
<script>
export default {
  data() {
    return {
      form:{},
      selectedStatus: '',
      inputKeyword: '',
      bao1:[],
      bao2:[],
      bao3:[],
      dialogVisible:false,
    }
  },
  methods: {
    openDialog(id){
      location.href = '#/add';
    },
    findAll(){
      this.findAll1();
      this.findAll2();
      this.findAll3();
    },
    findAll1(){
      this.axios.post(`http://localhost:8302/bao/getAll1`,this.form).then(res=>{
        this.bao1 = res.data.data;
      })
    },
    findAll2(){
      this.axios.post(`http://localhost:8302/bao/getAll2`,this.form).then(res=>{
        this.bao2 = res.data.data;
      })
    },
    findAll3(){
      this.axios.post(`http://localhost:8302/bao/getAll3`,this.form).then(res=>{
        this.bao3 = res.data.data;
      })
    },
    a(aa){
      localStorage.setItem("id", JSON.stringify(aa.id))
      // this.$router.push({name:"xq", params:{id: aa.id}});
      // location.href = '#/xq?id='+aa.id;
      this.$router.push('/baoxq');
    },
  },
  created() {
    this.findAll1();
    this.findAll2();
    this.findAll3();
  }
};
</script>
<template>
  <div class="c">
    <router-view/>
    <el-container>
      <el-header align="left" style="margin-top: 60px"> |  服务项目管理

      </el-header>
      <el-main align="left">
        <el-row>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-select v-model="form.zt" placeholder="请选择服务包状态">
              <!-- 这里可以根据实际情况添加项目类型选项 -->
              <el-option label="全部" :value="null"></el-option>
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="使用中" :value="1"></el-option>
              <el-option label="已驳回" :value="2"></el-option>
              <el-option label="已停用" :value="3"></el-option>
            </el-select>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-input v-model="form.name" placeholder="请输入关键字"></el-input>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-button type="primary" @click="findAll" style="width: 100px;">查询</el-button>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="13" align="right">
            <el-button type="primary" @click="openDialog" style="width: 140px">新增服务包</el-button>
          </el-col>
        </el-row>
        <h4>初级包</h4>
        <el-row  v-for="aa in bao1" style="width: 300px;display: inline-block;margin-right: 10px">
          <a @click="a(aa)">
          <el-col :span="24">
            <el-card>
                <img style="float: left;margin-top: 30px"  width="120px" height="80px" align="left"  :src="aa.img" alt="" >
                <span style="float:right;">
                <span>{{aa.name}}
                <span style="color: green" v-if="aa.zt==0">待审核</span>
                <span style="color: blue"  v-if="aa.zt==1">使用中</span>
                <span style="color: red"  v-if="aa.zt==2">已驳回</span>
                <span style="color: yellow"  v-if="aa.zt==3">已停用</span>
              </span>
              <div>服务对象: {{aa.fwdx}}</div>
              <div v-if="aa.biaoqian">
                <span  :style="{ fontSize: '12px' }">{{ aa.biaoqian }}</span>
              </div>
              </span>
            </el-card>
          </el-col>
          </a>
        </el-row>
        <h4>中级包</h4>
        <el-row  v-for="aa in bao2" :key="aa.name" style="width: 300px;display: inline-block;margin-right: 10px">
          <a @click="a(aa)">
            <el-col :span="24">
              <el-card >
                <img style="float: left;margin-top: 30px"  width="120px" height="80px" align="left"  :src="aa.img" alt="" >
                <span style="float:right;">
                <span>{{aa.name}}
               <span style="color: green" v-if="aa.zt==0">待审核</span>
                <span style="color: blue"  v-if="aa.zt==1">使用中</span>
                <span style="color: red"  v-if="aa.zt==2">已驳回</span>
                <span style="color: yellow"  v-if="aa.zt==3">已停用</span>
              </span>
              <div>服务对象: {{aa.fwdx}}</div>
              <div v-if="aa.biaoqian">
                <span  :style="{ fontSize: '12px' }">{{ aa.biaoqian }}</span>
              </div>
              </span>
              </el-card>
            </el-col>
          </a>
        </el-row>
        <h4>高级包</h4>
        <el-row  v-for="aa in bao3" :key="aa.name" style="width: 300px;display: inline-block;margin-right: 10px">
          <a @click="a(aa)">
            <el-col :span="24">
              <el-card >
                <img style="float: left;margin-top: 30px" width="120px" height="80px" align="left" :src="aa.img" alt="" >
                <span style="float:right;">
                <span>{{aa.name}}
                <span style="color: green" v-if="aa.zt==0">待审核</span>
                <span style="color: blue"  v-if="aa.zt==1">使用中</span>
                <span style="color: red"  v-if="aa.zt==2">已驳回</span>
                <span style="color: yellow"  v-if="aa.zt==3">已停用</span>
              </span>
              <div>服务对象: {{aa.fwdx}}</div>
              <div v-if="aa.biaoqian">
               <span  :style="{ fontSize: '12px' }">{{ aa.biaoqian }}</span>
              </div>
              </span>
              </el-card>
            </el-col>
          </a>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.c{
  background-color: #F2F7FB;
  border: 1px solid #d3dce6;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: 90%;
  height: 90%;
  overflow: auto;
}
</style>




